{% extends "vmServer/index_server.html" %}

{% block content %}

	<div class="row">
		<div class="col-xs-12">

			<botton class="btn btn-primary  pull-right" data-toggle="modal" data-target="#addPoolModal">
				<i class="icon-arrow-right icon-plus"></i>
						新增储存池
			</botton>

			<h3 class="header smaller lighter blue">
			<i class="icon-hand-right icon-animated-hand-pointer blue"></i>
			{{ vmServer.hostname }}存储池详情</h3>

			<div class="table-header">
				当前可操作的存储池
			</div>

			<div class="table-responsive">
				<table id="sample-table-2" class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th >
								<label>
									<input type="checkbox" class="ace" />
									<span class="lbl"></span>
								</label>
								存储池名
							</th>
							<th>类型</th>
							<th>存储路径</th>
							<th>容量(GB)</th>
							<th class="hidden-480">使用率(%)</th>
							<th>
								<i class="icon-time bigger-110 hidden-480"></i>
								卷个数
							</th>
							<th class="hidden-480">状态</th>
							<th class="col-sm-2 center">操作</th>
						</tr>
					</thead>

					<tbody>
					{% for ds in storageList %}
						<tr>
							<td >
								<label>
									<input type="checkbox" class="ace" />
									<span class="lbl"></span>
									<a href="/viewStorage/{{vmServer.id}}/{{ds.pool_name}}">{{ ds.pool_name }}</a>
								</label>
							</td>
							<td>
								{{ ds.pool_type }}
							</td>
							<td>
								{{ ds.pool_path }}
							</td>
							<td class="col-xs-1">
								{{ ds.pool_size }}
							</td>
							<td class="hidden-480">
								<div class="progress  progress-striped" data-percent="{{ ds.pool_per }}%">
									{% if ds.pool_per > 90  %}
									<div class="progress-bar progress-bar-danger" style="width: {{ ds.pool_per }}%;"></div>
									{% elif 70 < ds.pool_per and ds.pool_per < 90 %}
									<div class="progress-bar progress-bar-yellow" style="width: {{ ds.pool_per }}%;"></div>
									{% else %}
									<div class="progress-bar progress-bar-success" style="width: {{ ds.pool_per }}%;"></div>
									{% endif %}
								</div>
							</td>
							<td>
								<span class="badge badge-success">{{ ds.pool_volumes }}</span>
							</td>
							<td class="hidden-480">
								{% if ds.pool_active == 1 %}
									<span class="label label-success arrowed">
										Online
									</span>
								{% else %}
									<span class="label label-danger arrowed-in">
										Offline
									</span>
								{% endif %}
							</td>

							<td class="center">
								<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
									<a class="green" href="/viewStorage/{{ vmServer.id }}/{{ ds.pool_name }}">
										<i class="icon-zoom-in bigger-130"></i>
									</a>
									<a class="blue" href="javascript:" onclick="onBtnHandleStorage(this,{{ vmServer.id }},'{{ vmServer.server_ip }}','{{ ds.pool_name }}','refresh')">
										<i class="icon-refresh bigger-130"></i>
									</a>
									<a class="red" href="javascript:" onclick="onBtnHandleStorage(this,{{ vmServer.id }},'{{ vmServer.server_ip }}','{{ ds.pool_name }}','delete')">
										<i class="icon-trash bigger-130"></i>
									</a>
								</div>
							</td>
						</tr>
					{% endfor %}
					</tbody>
				</table>
			</div>
		</div>

	</div>

	{% include "vmStorage/add_storage_pop.html" %}
								
	<script type="text/javascript">
		if("ontouchend" in document) document.write("<script src='/static/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
	</script>

	<!-- page specific plugin scripts -->

	<script src="/static/js/jquery.dataTables.min.js"></script>
	<script src="/static/js/jquery.dataTables.bootstrap.js"></script>

	<script type="text/javascript">
		function oBtStorageTypeSelect() {
		   var obj = document.getElementById("pool_type");
		   var index = obj.selectedIndex;
		   var value = obj.options[index].value;
		   if (value=="dir"){
			   document.getElementById("div_pool_host").style.display="none";
			   document.getElementById("div_pool_uri").style.display="none";
			   document.getElementById("div_pool_spath").style.display="none";
			   document.getElementById("div_pool_disk").style.display="none";
			   document.getElementById("div_pool_logical").style.display="none";
			   document.getElementById("div_pool_iscsi").style.display="none";
			   document.getElementById("div_pool_tpath").style.display="";
		   }
		   else if (value=="nfs"){
			   document.getElementById("div_pool_host").style.display="";
			   document.getElementById("div_pool_uri").style.display="";
			   document.getElementById("div_pool_spath").style.display="none";
			   document.getElementById("div_pool_disk").style.display="none";
			   document.getElementById("div_pool_logical").style.display="none";
			   document.getElementById("div_pool_iscsi").style.display="none";
			   document.getElementById("div_pool_tpath").style.display="";
		   }
		   else if (value=="logical"){
			   document.getElementById("div_pool_host").style.display="none";
			   document.getElementById("div_pool_uri").style.display="none";
			   document.getElementById("div_pool_spath").style.display="none";
			   document.getElementById("div_pool_disk").style.display="none";
			   document.getElementById("div_pool_logical").style.display="";
			   document.getElementById("div_pool_iscsi").style.display="none";
			   document.getElementById("div_pool_tpath").style.display="";
		   }
		   else if (value=="disk"){
			   document.getElementById("div_pool_host").style.display="none";
			   document.getElementById("div_pool_uri").style.display="none";
			   document.getElementById("div_pool_spath").style.display="none";
			   document.getElementById("div_pool_disk").style.display="";
			   document.getElementById("div_pool_logical").style.display="none";
			   document.getElementById("div_pool_iscsi").style.display="none";
			   document.getElementById("div_pool_tpath").style.display="";
		   }
		   else if (value=="iscsi"){
			   document.getElementById("div_pool_host").style.display="";
			   document.getElementById("div_pool_uri").style.display="none";
			   document.getElementById("div_pool_spath").style.display="none";
			   document.getElementById("div_pool_disk").style.display="none";
			   document.getElementById("div_pool_logical").style.display="none";
			   document.getElementById("div_pool_iscsi").style.display="";
		   }
		   else if (value=="zfs"){
			   document.getElementById("div_pool_host").style.display="none";
			   document.getElementById("div_pool_uri").style.display="";
			   document.getElementById("div_pool_disk").style.display="none";
			   document.getElementById("div_pool_logical").style.display="";
			   document.getElementById("div_pool_iscsi").style.display="none";
			   document.getElementById("div_pool_spath").style.display="none";
			   document.getElementById("div_pool_tpath").style.display="none";
		   }
		   else if (value=="gluster"){
			   document.getElementById("div_pool_host").style.display="";
			   document.getElementById("div_pool_uri").style.display="";
			   document.getElementById("div_pool_disk").style.display="none";
			   document.getElementById("div_pool_logical").style.display="none";
			   document.getElementById("div_pool_iscsi").style.display="none";
			   document.getElementById("div_pool_spath").style.display="none";
			   document.getElementById("div_pool_tpath").style.display="none";
		   }
		}

		//添加存储池
		function addVmStorage(obj) {
			var btnObj = $(obj);
				btnObj.attr('disabled',true);
			var server_data = {};
			var form = document.getElementById('addStroage');
			for (var i = 1; i < form.length; ++i) {
				var name = form[i].name;
				var value = form[i].value;
				if ( value.length != 0){
					server_data[name] = value;
				}
			};

			$.ajax({
				dataType: "JSON",
				url:'/addStorage/{{vmServer.id}}/', //请求地址
				type:"POST",  //提交类似
				data:server_data,  //提交参数
				success:function(response){
					btnObj.removeAttr('disabled');
					if (response["code"] == 200){
						//window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
						layer.alert(response["msg"], function() {
							layer.closeAll();
							$('#addPoolModal').modal('hide');
							window.location.reload();
						});
					}
					else {
						layer.alert(response["msg"], {icon: 2});
						//window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
					}
				},
				error:function(response){
					layer.alert(response["msg"], {icon: 2});
					//window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
				}
			})
		}

		jQuery(function($) {
			var oTable1 = $('#sample-table-2').dataTable( {
			"aoColumns": [
			  { "bSortable": false },
			  null, null,null, null, null,
			  { "bSortable": false }
			] } );

			$('table th input:checkbox').on('click' , function(){
				var that = this;
				$(this).closest('table').find('tr > td:first-child input:checkbox')
				.each(function(){
					this.checked = that.checked;
					$(this).closest('tr').toggleClass('selected');
				});
			});

			$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
			function tooltip_placement(context, source) {
				var $source = $(source);
				var $parent = $source.closest('table')
				var off1 = $parent.offset();
				var w1 = $parent.width();

				var off2 = $source.offset();
				var w2 = $source.width();

				if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
				return 'left';
			}
		})

		//存储池操作按钮
		function onBtnHandleStorage(obj, server_id,server_ip,pool_name,op){
			var btnObj = $(obj);
			if ( op == 'delete'){
				var txt=  "是否确认删除？"
			}
			else if ( op == 'disable'){
				var txt=  "是否确认禁用？"
			}
			else if ( op == 'refresh'){
				var txt=  "是否确认刷新？"
			}

			layer.confirm(txt, {
				title: "操作主机("+server_ip+")",
				btn: ['确定','取消'] //按钮
			}, function(){
				$.ajax({
					type: 'POST',
					url: '/handleStorage/{{vmServer.id}}/',
					data:{
						"server_id":server_id,
						"op":op,
						"pool_name":pool_name
					},
					success:function(response){
						if (response["code"]=="200"){
							layer.alert(response["msg"], function(){
									layer.closeAll();
									layer.load(1);
									window.location.reload();
								});
						} else{
							layer.alert(response["msg"], {icon: 2});
						}
					},
					error:function(response){
						layer.alert(response["msg"], {icon: 2});
					},
				});
			}, function(){
				//cancel
			});
		}
    </script>

{% endblock %}
